import React, { useState, useEffect } from 'react';
import Image from 'next/image';
import { LogoProp } from '../../lib/type';
import logo from '../../assets/logo.svg';
import logoBlack from '../../assets/logo-black.svg';
import Link from 'next/link';
import styles from './index.module.css';

const Logo: React.FC<LogoProp> = ({ type, width, height }) => {
  const [logoUrl, setLogoUrl] = useState(logo);

  useEffect(() => {
    type === 'black' ? setLogoUrl(logoBlack) : setLogoUrl(logo);
  }, [type]);
  
  return (
    <Link href="/">
      <Image
        className={styles.logo}
        src={logoUrl}
        alt='Gitee — 基于 Git 的代码托管和研发协作平台'
        title='Gitee — 基于 Git 的代码托管和研发协作平台'
        width={width}
        height={height}
      />
    </Link>
  )
}

export default Logo;
